<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Compiled and minified CSS -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <title>Let's Chat!</title>
</head>

<body>
  <div class="container">
    <nav>
      <div class="nav-wrapper teal lighten-1">
        <a href="#" class="brand-logo center flow-text">Socket.io简易聊天室</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#" class="logout">退出</a></li>
        </ul>
      </div>
    </nav>

    <div class="row">
      <!-- 在线用户列表 -->
      <div class="col s3">
        <h3 class="flow-text center blue-text lighten-2">在线用户列表</h3>
        <ul class="collection user-list"></ul>
      </div>

      <div class="col s9">

        <!-- 登录页面 -->
        <div id="login-page" class="card blue-grey darken-1">
          <div class="card-action white">
            <span class="card-title flow-text teal-text text-lighten-1">输入你的笔名</span>
            <form id="login-form">
              <div class="input-field">
                <input type="text" id="name">
                <label for="name" class="active">PenName</label>
              </div>
              <div class="right-align">
                <button class="btn waves-effect waves-light" type="submit" name="action">
                  Let's chat!
                  <i class="material-icons right">chat</i>
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 消息发送页面 -->
        <div id="message-page" class="card blue-grey darken-1" style="display: none;">
          <div class="chat-record card-content white-text"></div>
          <div class="card-action white">
            <span class="card-title flow-text teal-text text-lighten-1">发送消息栏</span>
            <form id="message-form">
              <div class="input-field">
                <input id="messages" type="text"></input>
                <label class="active" for="messages">MESSAGE</label>
              </div>
              <div class="right-align">
                <button class="btn waves-effect waves-light" type="submit" name="action">
                  SEND
                  <i class="material-icons right">send</i>
                </button>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>